<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="tab-container">
          <div class="con-title">选取文件：</div>
          <div class="upload-file">
            <section>
              <el-upload
                class="upload-demo"
                ref="uploadBatch"
                action="string"
                accept=".ppt"
                :show-file-list='false'
                :on-remove="handleRemove"
                :on-change="handleChange"
                :http-request="httpRequestExport"
                :auto-upload="false"
              >
                <span>+上传PPT</span>
              </el-upload>
            </section>
            <section>
              <el-upload
                class="upload-demo"
                ref="uploadBatch"
                action="string"
                accept=".pdf"
                :show-file-list='false'
                :on-remove="handleRemove"
                :on-change="handleChange"
                :http-request="httpRequestExport"
                :auto-upload="false"
              >
              <span>+上传PDF</span>
              </el-upload>
            </section>
          </div>
          <div class="con-note">
            <span>注：资料只允许上传PPT或PDF格式(建议横向等于1280，纵向等于720)</span>
          </div>
          <div class="con-title">已上传文件</div>
          <div class="file-uploads">
            <div v-for="(item,index) in fileList" :key="index">
              <section v-show="item.name.lastIndexOf('.ppt')!=-1">
                <i class="iconfont icon-PPT"></i>
                <i class="iconfont icon-round_delete" @click="handleRemove"></i>
              </section>
              <section v-show="item.name.lastIndexOf('.pdf')!=-1">
                <i class="iconfont icon-PDF"></i>
                <i class="iconfont icon-round_delete" @click="handleRemove"></i>
              </section>
              <div class="con-title file-name" style="display:block">{{item.name}}</div>
            </div>
          </div>
          <div style="width: 78%; margin-left: 70px; position:absolute;bottom:30px" >
            <el-button size="mini" type="default" @click="cancel()"
              >返回</el-button
            >
            <!-- <el-button
              size="mini"
              type="primary"
              @click="saveAdd()"
              >保存</el-button
            > -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MD5 from "js-md5";
import HeaderTitle from "@/components/Headertitle/index";
import {
  fetchAdd,
  fetchGetData,
  fetchDetail,
} from "@/api/systemapi/restmanage.js";
export default {
  components: {
    HeaderTitle,
  },
  data() {
    return {
      entNum: "",
      titleList: [{ title: "业务设置" },{ title: "资料库" },{ title: "配置" }],
      fileList: [],
      infoForm: {
        name: "", // 视讯号码
        remark: "", // 密码
        sort: "",
        title:"",//标题
        content:""//内容
      },
      showType:1
    };
  },
  mounted() {
    const { entNum } = this.$route.query;
    this.entNum = entNum;
  },
  methods: {
    cancel() {
      this.$router.back()
    },
    saveAdd() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs["ruleForm1"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
      Promise.all([p1]).then(() => {
        fetchAdd({ ...this.infoForm }).then((response) => {
          if (response.code == 0) {
            this.cancel();
          } else {
            this.$message({
              type: "error",
              message: response.msg,
            });
          }
        });
      });
    },
    // 批量导入文件
    httpRequestExport(param) {
      console.log(param, "param");
      let fileObj = param.file; // 相当于input里取得的files
      console.log(fileObj, "fileObj");
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("meetingId", this.formObj.meetingId); // 文件对象
      fd.append("sessionId", this.formObj.sessionId); // 文件对象
      fd.append("agentId", this.formObj.agentId); // 文件对象
      fd.append("fileType", this.formObj.fileType); // 文件对象
      fd.append("skillId", this.formObj.skillId); // 文件对象
      fd.append("remark", this.formObj.remark); // 文件对象
      console.log(fd, "fd");
      fetchAdd(fd).then((res) => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.fetchData();
          param.file = null
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, "111",fileList,"1222");
    },
    handleChange(file, fileList){
      console.log(fileList,"fileList")
      this.fileList=fileList
      console.log(this.fileList,"pptFileListpptFileList")
      this.fileList.forEach((item,index)=>{
        if(item.name.lastIndexOf('.ppt')!=-1){
          this.showType=1
        }else if(item.name.lastIndexOf('.pdf')!=-1){
          this.showType=2
        }else{
          alert('请上传规定的文档格式')
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .tab-container {
        width: 100%;
        padding: 20px 20px 10px;
        margin-top: 15px;
        .con-title {
          margin-bottom: 15px;
          font-size: 14px;
          color: #666;
        }
        .con-note{
          margin-bottom: 50px;
          font-size: 14px;
          color: #666;
        }
        .upload-file{
          display: flex;
          margin-bottom: 15px;
          font-size: 14px;
          color: #379DFF;
          section{
            width:140px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid #abafb3;
            border-radius: 2px;
            cursor: pointer;
            margin:0 25px 15px 0;
            font-weight: normal;
            font-weight: bold;
          }
        }
        .file-uploads{
          display: flex;
          div{
            width:200px;
            text-align: left;
            section{
              margin-right: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
              width:100px;
              height:100px;
              border:1px solid #BBBBBB;
              text-align:center;
              line-height:100px;
              position:relative;
              .icon-PPT{
                color:orange;
                font-size:40px
              }
              .icon-PDF{
                color:red;
                font-size:40px
              }
              .icon-round_delete{
                position:absolute;
                top:-50px;
                right:-10px;
                cursor:pointer;
              }
            }
            .file-name{
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
